import React from 'react'
import {Link} from 'react-router'

import TopBar from '../components/TopBar'
import Nav from '../components/Nav'
import Footer from '../components/Footer'
import Loginout from '../components/Loginout'
import ContractList from '../components/ContractList'

import '../public/css/detail.scss'
import Api from "../router/Api";
import requestSign from "../public/js/requestSign";
import axios from 'axios'


class Details extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            planLists : [],
            isShow:false,
            dialog:"false",
            conDialog:"false",
            borrowerDetail:{}
        }
    }
    componentWillMount(){
        const _this = this;
        const id = this.props.params.id;
        Api.getTimeStamp()
            .then(function (res) {
                const token = sessionStorage.getItem('token');
                const timestamp = res.data.data.timestamp;
                const sign = requestSign({timestamp,token,id});
                axios.all([Api.getBorrowDetail({
                    params:{
                        token:token,
                        timestamp:timestamp,
                        sign:sign.sign,
                        id:id
                    }
                }),Api.getRepayPlan({
                    params:{
                        token:token,
                        timestamp:timestamp,
                        sign:sign.sign,
                        id:id
                    }
                })])
                    .then(axios.spread(function (acct, perms) {
                        console.log(acct.data.data);
                        console.log(perms);
                        if(acct.data.success){
                            _this.setState({
                                borrowerDetail:acct.data.data
                            });
                            if(acct.data.data.status <= 2){//当募集中，放款计息时间为空
                                sessionStorage.setItem('startTime','null');//kaishishijian
                                sessionStorage.setItem('endTime','null');//jieshushijian
                            }else{
                                sessionStorage.setItem('startTime',acct.data.data.drawTime);//kaishishijian
                                sessionStorage.setItem('endTime',acct.data.data.dueTime);//jieshushijian
                            }
                            sessionStorage.setItem('lilv',acct.data.data.contractInterest);//lilv
                            sessionStorage.setItem('deration',acct.data.data.investDirection);//lixi
                            sessionStorage.setItem('duration',acct.data.data.duration);//qixian
                            sessionStorage.setItem('hkfs',acct.data.data.repaymentTypeName)//huankuanfangshi
                        }
                        if(perms.data.success){
                            _this.setState({
                                planLists:perms.data.data.rows
                            })
                        }
                    }))
            })
            .catch(function (err) {
                console.log(err);
            })
    }
    handleMouseover(){
        this.setState({
            isShow:true
        });
    }
    handleMouseout(){
        this.setState({
            isShow:false
        })
    }
    dialogShow(msg){//处理父组件和子组件的通信
        this.setState({
            dialog:msg
        });
    }
    contractShow(msg){
        this.setState({
            conDialog:msg
        })
    }
    changeDialog(){
        this.setState({
            conDialog:"true"
        })
    }
    render(){
        const timeCut = (time)=>new Date(time).getFullYear()+'-'+(new Date(time).getMonth()+1)+'-'+new Date(time).getDate();
        const planlists = this.state.planLists.map((planlist,i)=>
            <li key={i} className="clearFix"><span>{planlist.period}</span><span>{timeCut(planlist.dueTime)}</span><span>{planlist.dueCapital}</span><span>{planlist.dueInterest}</span><span className={planlist.statusNew!=1 ? "":"norepay"}>{planlist.statusNewName}</span></li>
        );
        return(
            <div>
                <TopBar/>
                <div className="detail">
                    <Nav dialogShow = {msg => this.dialogShow(msg)}/>
                    <div className="detail-ctn">
                        <div className="clearFix">
                            <h3 className="fl">借款详情</h3>
                            <div className="fr"><Link to={sessionStorage.getItem('lastRouter')}><i className="icon iconfont icon-icon-left"></i>返回</Link></div>
                        </div>
                        <div className="detail-info">
                            <div className="clearFix">
                                <h4 className="fl">{this.state.borrowerDetail.title}</h4>
                                <p className="fr">{this.state.borrowerDetail.statusName}</p>
                            </div>
                            <div>
                                <span></span>
                                <span></span>
                                <ul className="clearFix">
                                    <li className={this.state.borrowerDetail.status >=2 ?"active":""}>
                                        <i>1</i>
                                        <h5>募集开始时间</h5>
                                        <p>{this.state.borrowerDetail.raiseStartTime ? timeCut(this.state.borrowerDetail.raiseStartTime) : "----"}</p>
                                    </li>
                                    <li className={this.state.borrowerDetail.status >=3 ?"active":""}>
                                        <i>2</i>
                                        <h5>放款计息时间</h5>
                                        <p>{this.state.borrowerDetail.status>2 ? (this.state.borrowerDetail.drawTime ? timeCut(this.state.borrowerDetail.drawTime) : "----") : "----"}</p>
                                    </li>
                                    <li className={this.state.borrowerDetail.status >=4 ?"active":""}>
                                        <i>3</i>
                                        <h5>到期还款时间</h5>
                                        <p>{this.state.borrowerDetail.status>2 ? (this.state.borrowerDetail.dueTime ? timeCut(this.state.borrowerDetail.dueTime) : "----") : "----"}</p>
                                    </li>
                                </ul>
                            </div>
                            <div className="clearFix">
                                <div className="fl">
                                    <p>借款项目：<span>{this.state.borrowerDetail.title}</span></p>
                                    <p>起息方式：<span>T+1</span></p>
                                    <p>合同期限：<span>{this.state.borrowerDetail.status>2 ? (this.state.borrowerDetail.drawTime ? timeCut(this.state.borrowerDetail.drawTime) : "----") : '----'}至{this.state.borrowerDetail.status>2 ? (this.state.borrowerDetail.dueTime ? timeCut(this.state.borrowerDetail.dueTime) : "----") : "----"}</span></p>
                                    <div className={this.state.isShow ? "atten" : "atten hide"}>成标放款日是指本期项目根据借款合同约定的满足放款条件的日期</div>
                                </div>
                                <div className="fl">
                                    <p>借款金额：<span>{this.state.borrowerDetail.amount ? (this.state.borrowerDetail.amount).toLocaleString('en-US') : 0}元</span></p>
                                    <p>应还本息：<span>{this.state.borrowerDetail.rdsum ? (this.state.borrowerDetail.rdsum).toLocaleString('en-US') : 0}元</span></p>
                                    <p>创建时间：<span>{this.state.borrowerDetail.addTime ? timeCut(this.state.borrowerDetail.addTime) : "----"}</span></p>
                                </div>
                                <div className="fr">
                                    <div className="clearFix">
                                        <p className="fl">借款期限：<span>{this.state.borrowerDetail.duration}天</span></p>
                                        <p className="fr">还款周期：<span>{this.state.borrowerDetail.rdcount}期</span></p>
                                    </div>
                                    <p>还款方式：<span>{this.state.borrowerDetail.repaymentTypeName}</span></p>
                                    <p>借款合同：<span>点击查看<a onClick={this.changeDialog.bind(this)}>《借款合同》</a></span></p>
                                </div>
                            </div>
                        </div>
                        <div className="repayplan">
                            <div className="clearFix">
                                <h4 className="fl">还款计划</h4>
                                <p className="fr">还款日由放款日按照月份计算得出，超出当月天数则取最后日期</p>
                            </div>
                            <div>
                                <ul>
                                    <li className="clearFix"><span>期数</span><span>还款日</span><span>应还本金(元)</span><span>应还利息(元)</span><span>状态</span></li>
                                </ul>
                                <ul>{planlists}</ul>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer/>
                <Loginout dialog={this.state.dialog} isDialog = {msg => this.dialogShow(msg)}/>
                <ContractList dialog={this.state.conDialog} isContractShow = {msg => this.contractShow(msg)} id={this.props.params.id}/>
            </div>
        )
    }
}

export default Details